<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .color{
            color: #999;
        }
        .fr{
            float: right;
            color: red;
        }
        .fr img{
            vertical-align: middle;
            width: 15px;
            margin-right: 5px;
        }
    </style>
</head>

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <div id="box">
        <h1>{{res.title}}</h1>
        <p class="title">
            ·分享:问答 ·{{res.visit_count}}次访问
            ·发布于{{res.last_reply_at |ferdate}}
            ·作者:{{res.author.loginname}}
         </p>
         <div v-html="res.content">{{res.content}}</div>
         <ul>
            <li v-for="(item,index) in res.replies">
                <h5>{{item.author.loginname}} <span class="color">{{index+1}}楼</span> <span class="fr"><img src="./images/cart.jpg" alt="">{{item.ups.length}}</span> </h5>
                   <p v-html="item.content">
                       {{item.content}}
                   </p>
               </li>
        </ul>
    </div>
    <script>
         let zero =val=>{
           return val <10? "0"+val:val
    }
        let vm = new Vue({
            el: "#box",
            data: {
                res:{}
            },
            mounted(){
                    axios.get("https://cnodejs.org/api/v1/topic/5ae140407b0e8dc508cca7cc")
                    .then(
                        res=>{
                            this.res = res.data.data
                            console.log(res);
                        }
                    )
            },
            methods:{
                
            },
            filters:{
            ferdate:val=>{
                let date = new Date(val);
                    let year = date.getFullYear();
                    let month = zero(date.getMonth() + 1);
                    let day = zero(date.getDate());
                    let hours = zero(date.getHours());
                    let minutes = zero(date.getMinutes());
                    let seconds = zero(date.getSeconds());
                    return year + '-' + month + '-' + day + '-' + ' ' + hours + ':' + minutes + ':' + seconds;
            }

        }
        })
    </script>
</body>

</html>